!<template>
  <div class="home-container">
    <a-card :bordered="false" style="width: 100%">
      <template #title>
        <div class="top-info">
          <div class="top-user-avatar">
            <a-avatar
              alt="USER"
              shape="circle"
              size="large"
              :style="{ backgroundColor: '#1e1e1e', verticalAlign: 'middle' }"
            >{{ avatarText.substr(0, 1) }}</a-avatar>
            <div class="identity">
              <contacts-outlined />
              {{roleName}}
            </div>
            <div class="user-info">
              <div class="user-info-title">
                欢迎回来！
                <span>{{avatarText}}</span>
              </div>
            </div>
          </div>
        </div>
      </template>
      <div class="day-wordContainer">
        <div class="day-word">
        <div>『{{dayword.word}}』
          <!-- <a-tooltip title="刷新"><redo-outlined @click="getWord" /></a-tooltip> -->
          </div>
        <div class="day-word-auth">
          <span style="margin:1rem 5rem 0 0">—— {{dayword.auth}}</span>
        </div>
      </div>
      </div>
    </a-card>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
export default {
  name: "firstHome",
  setup() {
    return {
      avatarText: null,
      roleName: null
    };
  },
  created() {
    this.roleName = ref(
      JSON.parse(window.sessionStorage.getItem("login_user")).roleName
    );
    this.avatarText = JSON.parse(
      window.sessionStorage.getItem("login_user")
    ).userName;
    this.getWord();
  },
  data() {
    return {
      dayword: {
        word: "",
        auth: ""
      }
    };
  },

  mounted() {},

  methods: {
    getWord() {
      fetch("https://v1.hitokoto.cn?c=d&c=j&c=k")
        .then(response => response.json())
        .then(data => {
          this.dayword.word = data.hitokoto;
          this.dayword.auth = data.creator;
        })
        .catch(console.error);
    }
  }
};
</script>

<style scoped>
.day-wordContainer {
  display: flex;
  justify-content: center;
}
.day-word-auth {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  font-size: 16px;
  color: rgb(141, 140, 140);
}
.day-word {
  width: 55%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 18rem;
  font-size: 20px;
  color: rgb(59, 59, 59);
}
.identity {
  font-size: 10px;
  color: rgb(255 255 255);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  background: rgb(128, 164, 146);
  margin-top: 2px;
  border-radius: 4px;
  padding: 2px 10px;
  user-select: none;
}
.top-info {
  display: flex;
  justify-content: space-between;
}
.user-info {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
}
.home-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
}
.top-user-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
</style>